<template>
  <!-- 三个工具箱 -->
  <div id="tool-wrapper" :style="{ right: isManage ? '1%' : '29%' }">
    <div class="tool-item" v-for="item in tools" :title="item.title">
      <a-popover placement="leftTop" trigger="click">
        <template #content>
          <LineController v-if="item.title == '图层控制'" />
          <MousePosition v-if="item.title == '鼠标位置'" />
        </template>
        <i
          :class="['iconfont', item.icon, disabled ? 'disabled-icon' : '']"
        ></i>
      </a-popover>
    </div>
    <div class="tool-item" :title="'全屏控件'">
      <i
        :class="[
          'iconfont',
          'metro-quanping_o',
          disabled ? 'disabled-icon' : '',
        ]"
        @click.stop="requestFullscreen"
      ></i>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { watchLineData,useLineData } from '@/store';
import { renderAll } from '@/cesiumTools/effectController.js'; //渲染全部站点和线路
import LineController from './LineController.vue'; //图层显隐组件
import MousePosition from './MousePosition.vue'; //鼠标位置组件
let viewer;
const lineDataStore = useLineData()
// 进入全屏(默认使用esc退出全屏)
const requestFullscreen = () => {
  const element = viewer.scene.canvas;
  Cesium.Fullscreen.requestFullscreen(element);
};

const tools = ref([
  {
    title: '鼠标位置',
    icon: 'metro-zhizhen',
  },
  {
    title: '图层控制',
    icon: 'metro-layer',
  },
]);

const disabled = ref(false);
const isManage = ref(false);

// 获取到disable信息，并禁用图层管理(通过状态添加上pointer-events: none属性)
lineDataStore.$onAction(({ name, store, args, after, onError })=>{
  if (name === 'disableController'){
    after((res) => {
        disabled.value = lineDataStore.isDisable;
    });
  }
})

onMounted(async () => {
  viewer = await watchLineData('setViewer');
  const lineData = await watchLineData('setData');
  renderAll(viewer, lineData); //渲染全部线路站点
});
</script>
<style scoped>
#tool-wrapper {
  position: absolute;
  right: 29%;
  bottom: 10%;
  display: flex;
  flex-direction: column;
  z-index: 199;
}

.tool-item {
  margin: 4px;
  pointer-events: all;
  cursor: pointer;
}

.tool-item:hover {
  background-color: #d8951a7f;
}

#tool-wrapper i {
  color: #ffd31a;
  border: 1px solid #d8951a;
  padding: 3px;
}

#tool-wrapper span {
  color: #fff;
}

.disabled-icon {
  pointer-events: none;
  cursor: none;
  background-color: rgba(204, 204, 204, 0.306);
}

.disabled-icon:hover {
  cursor: none;
}
.screen-btn {
  width: 80px;
  height: 40px;
  position: absolute;
  top: 100px;
  left: 10px;
  border: none;
  outline: none;
  cursor: pointer;
  background: rgba(111, 111, 111, 0.6);
  color: #ddd;
  border-radius: 5px;
}
.noshow {
  display: none;
}
</style>
